<template>
  <div class="cutPriceTap">
    <div class="tedaySale">
      <div class="header">
        <img src="@assets/images/cutPrice/crazy.png" alt="" />
      </div>
      <div class="saleList">
        <div class="Salegood" v-for="oneGood in pageDate.hot" :key="oneGood.id">
          <img  @click="toGoodDetail(oneGood.id)" :src="oneGood.image+'?x-oss-process=image/resize,limit_0,m_fill,w_200,h_200/quality,q_100'" alt="" srcset="" />
          <div class="noGood" @click="toGoodDetail(oneGood.id)" v-if="oneGood.stock == '0'">
            <p class="wordAlert">补货中</p>
          </div>
          <p class="price"  @click="toGoodDetail(oneGood.id)">
            <span class="unit">￥</span>
            <span class="nowPrice">{{oneGood.price}}</span>
            <span class="oldPrice">￥{{oneGood.ot_price}}</span>
          </p>
        </div>
        
      </div>
    </div>
    <div class="bannerImg">
      <img src="@assets/images/cutPrice/actGoods.png" alt="" srcset="" />
    </div>
    <div class="allGoods">
      <div class="typeTab">
        <div
          class="swiper-container swiper-container-horizontal"
          style="width: 100%;box-sizing: border-box;height: 0.6rem;line-height: 1;padding: 0.01rem;"
          id="swiper1"
        >
          <div class="swiper-wrapper" style="width: 100%;box-sizing: border-box;height: 0.6rem;line-height: 1;padding: 0.01rem;">
            <p
              class="swiper-slide"
              v-for="(item, index) in pageDate.goods"
              :class="{ active: iscur1 == index }"
              :key="index"
              @click.stop="
                (iscur1 = index)
              "
            >
              {{ index }}
              <span :class="{ activeShow: iscur1 == index }"></span>
            </p>
          </div>
        </div>
      </div>
      <div class="goodsList" v-if="Object.keys(pageDate).length">
        <div class="good" v-for="oneGood in pageDate.goods[iscur1]" :key="oneGood.id">
          <img class="goodPic" @click="toGoodDetail(oneGood.id)"  :src="oneGood.image+'?x-oss-process=image/resize,limit_0,m_fill,w_200,h_200/quality,q_100'" alt="" srcset="" />
          <div class="noGood" @click="toGoodDetail(oneGood.id)" v-if="oneGood.stock == '0'">
            <p class="wordAlert">补货中</p>
          </div>
          <div class="goodDetail" @click="toGoodDetail(oneGood.id)" >
            <p class="title">{{oneGood.store_name}}</p>
            <div class="shareAndget">
              <!-- <div class="get">
                <span class="word">最高赚</span>
                <p class="priceget"><span style=" font-weight: 600;padding-top:.01rem;">￥</span>{{oneGood.commission}}</p>
              </div>
              <p class="share" v-if="from1 == 'app'" @click.stop="share(oneGood)">分享赚</p>
              <p class="share" v-if="from1 != 'app'">分享赚</p> -->
            </div>
            <p class="price">
              <span style="font-weight: bold">￥</span>
              <span style="font-weight: bold" class="nowPrice">{{oneGood.price}}</span>
              <span class="oldPrice">￥{{oneGood.ot_price}}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="copy" @click="clip()">2222222222222222222</div> -->
    <div class="allBg" @click="hideShare" v-if="isapp=='1'">
      <div class="shareTitle">快去分享给好友购买吧</div>
      <div class="shareButton">
        <p @click.stop="getimg(1,1)">
            <img src="@assets/images/cutPrice/wechat_share.png" alt="">
            <span>微信</span>
        </p>
        <p @click.stop="getimg(2,1)">
            <img src="@assets/images/cutPrice/wechatMonment_share.png" alt="">
            <span>朋友圈</span>
        </p>
        <p @click.stop="getimg(4,1)">
            <img src="@assets/images/cutPrice/weibo_share.png" alt="">
            <span>微博</span>
        </p>
        <!-- <p @click.stop="getimg(3,1)">
            <img src="@assets/images/cutPrice/qq_share.png" alt="">
            <span>QQ</span>
        </p> -->
        <p @click="getimg('copy',2)" class="copy">
            <img src="@assets/images/cutPrice/copy.png" alt="">
            <span>复制链接</span>
        </p>
      </div>
    </div>
    
  </div>

</template>
<script>
import Swiper from "swiper";
import shareMsg from "@common/shareConfig.js";
import share from "@common/share.js";
import cbct from "@common/base.js"
import cookie from "@utils/store/cookie";
import {bargainList} from "@api/cutPrice.js"
import "@assets/css/swiper.min.css";
import { VUE_APP_WS_URL } from "@utils/index";
import ClipboardJS from "clipboard";
export default {
  name: "cutPriceTap",
  props: {
    pageUrl: {
      type: String
    },
    from1:{
      type:String
    },
  },
  data() {
    return {
      iscur1: 0,  //一级tab切换
      pageDate:{
      },
      shareMsg:{
        shareTitle:'',
        shareImg:'',
        sharedis:'',
        shareUrl:'',
      },
      copyGoodId:'',
      isapp:'0',
    };
  },
  created() {
    console.log(process.env);
  },
  mounted() {
    this.getData();
    
  },
  methods: {
    // clip(){
    
    // },
    share(oneGood){
      let shareUrl1 = '';
      this.copyGoodId = oneGood.id;
      if(this.pageUrl.indexOf('cutPage') >'-1'){
        shareUrl1 = `${VUE_APP_WS_URL}cutPrice/cutPriceDetails?goodId=${oneGood.id}`
      }else{
        shareUrl1 = `${VUE_APP_WS_URL}cutPrice/cutPriceDetails?goodId=${oneGood.id}&shareUserId=${cbct.getCookie("cutUid")}`
      }
      this.shareMsg.shareTitle = `听见广播年货节 爆款商品千万补贴`;
      this.shareMsg.shareImg = `${oneGood.image}`;
      this.shareMsg.sharedis = `${oneGood.store_name} 原价${oneGood.ot_price}元，超值价${oneGood.price}元`;
      this.shareMsg.shareUrl = shareUrl1;
      this.isapp = '1';
      
    },
    hideShare(){
      this.isapp = '0';
    },
    getimg(actionType,isshare){
      if(actionType === 'copy'){
          let Url = '';
          if(this.pageUrl.indexOf('cutPage') >'-1'){
            Url = `${VUE_APP_WS_URL}cutPrice/cutPriceDetails?goodId=${this.copyGoodId}`
          }else{
            Url = `${VUE_APP_WS_URL}cutPrice/cutPriceDetails?goodId=${this.copyGoodId}&shareUserId=${cbct.getCookie("cutUid")}`
          }
          let clipboard = new ClipboardJS(".copy", {
          text: () => {
          return Url;
          }
          });
          clipboard.on("success", () => {
            this.$dialog.success("复制成功");
          });
      }else{
        //单独分享
        shareMsg.singleShare(
          'app','0',this.shareMsg.shareTitle,this.shareMsg.sharedis,this.shareMsg.shareUrl,this.shareMsg.shareImg,'',actionType
        )
      }
      this.isapp = '0';
    },
    toGoodDetail(id){
      if(this.pageUrl.split('?')[1]){
        this.$router.push({ path: `/cutPrice/cutPriceDetails?goodId=${id}&${this.pageUrl.split('?')[1]}&from1=${this.from1}` });
      }else{
        this.$router.push({ path: `/cutPrice/cutPriceDetails?goodId=${id}&from1=${this.from1}` });
      }
      
    },
    getData(){
      let that = this;
      bargainList()
        .then(res => {
          that.pageDate = res.data;
          this.$nextTick(function(){
            let swiper = new Swiper("#swiper1", {
              slidesPerView: "auto",
              spaceBetween: 20,
              watchSlidesProgress: true,
              // watchSlidesVisibility: true,
              observer: true, //修改swiper自己或子元素时，自动初始化swiper
              observeParents: true //修改swiper的父元素时，自动初始化swiper
            });
          })
        that.iscur1 = Object.keys(res.data.goods)[0]
        })
        .catch(res => {
          that.$dialog.error(res.msg);
        });
      
    },
  },
  components: {}
};
</script>
<style scoped lang="scss">
.cutPriceTap {
  width: 100%;
  height: auto;
  background: rgba(181, 19, 24, 1);
  min-height: 100vh;
  overflow: hidden;
  // 热卖
  .tedaySale {
    width: 100%;
    height: auto;
    .header {
      width: 100%;
      height: auto;
      line-height: 1;
      // padding: 0.1rem;
      color: rgba(251, 217, 164, 1);
      text-align: center;
      img {
        display: block;
        width: 100%;
      }
    }
    .saleList {
      width: 100%;
      display: flex;
      justify-content: start;
      align-items: self-end;
      margin-left: 0.3rem;
      .Salegood {
        margin-right: 0.1rem;
        width: 2.24rem;
        height: 2.6rem;
        background: #ff4e51;
        border-radius: 0.16rem;
        overflow: hidden;
        position: relative;
        img {
          display: block;
          width: 100%;
          height: 2.04rem;
        }
        .noGood{
          top: 0;
          left: 0;
          position: absolute;
          width: 100%;
          height: 2.04rem;
          // opacity: 0.6;
          background: rgba(255,255,255,0.6);
          .wordAlert{
            display: block;
            margin: 0 auto;
            margin-top: 0.76rem;
            width: 1.42rem;
            height: auto;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 0.28rem;
            text-align: center;
            font-size: 0.24rem;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 1;
            padding: 0.14rem 0;
          }
        }
        p {
          display: flex;
          justify-content: start;
          align-items: baseline;
          line-height: 1;
          padding-top: 0.12rem;
          .unit {
            color: #fee9cd;
            font-size: 0.24rem;
            padding-left: 0.1rem;
            font-weight: 500;
          }
          .nowPrice {
            color: #fee9cd;
            font-size: 0.3rem;
            padding-right: 0.08rem;
          }
          .oldPrice {
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.24rem;
            transform: scale(0.83);
            transform-origin: 0 0;
            text-decoration: line-through;
          }
        }
      }
    }
  }
  // banner图片
  .bannerImg {
    width: 100%;
    height: 1.32rem;
    margin: 0.52rem 0 0.24rem 0;
    display: flex;
    justify-content: center;
    img {
      width: 4.26rem;
    }
  }
  // 商品列表
  .allGoods {
    width: 100%;
    height: auto;
  }
  .typeTab {
    width: 100%;
    height: 0.6rem;
    margin-bottom: 0.3rem;
    .swiper-container {
      width: 100%;
      box-sizing: border-box;
      height: 0.6rem;
      line-height: 1;
      padding: 0.01rem;
      .swiper-slide {
        text-align: center;
        font-weight: 400;
        font-size: 0.28rem;
        color: rgba(255, 255, 255, 0.6);
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        width: auto !important;
        margin-right: 0.08rem !important;
        margin-left: 0.32rem !important;
      }
      .swiper-slide.active {
        line-height: 0;
        font-size: 0.38rem;
        font-weight: bold;
        padding-bottom: 0.1rem;
        color: #fff;
      }
      .activeShow {
        position: absolute;
        bottom: 0.01rem;
        left: 50%;
        margin-left: -0.15rem;
        width: 0.3rem;
        height: 0.1rem;
        padding-bottom: 0.06rem;
        background: linear-gradient(180deg, #ffdf95 0%, #ffa735 100%);
        border-radius: 0.06rem;
      }
    }
  }
  .goodsList {
    width: 7.22rem;
    margin: 0 0.14rem;
    padding: 0.14rem;
    background: rgba(255, 78, 81, 1);
    display: flex;
    border-radius: .1rem;
    justify-content: space-between;
    flex-wrap: wrap;
    .good {
      width: 3.42rem;
      height: 4.92rem;
      background: #ffffff;
      border-radius: 0.08rem;
      overflow: hidden;
      margin-bottom: 0.14rem;
      position: relative;
      .goodPic {
        display: block;
        width: 3.1rem;
        height: 3.08rem;
        margin: 0.18rem 0.16rem 0.1rem 0.16rem;
      }
      .noGood{
          top: 0;
          left: 0;
          position: absolute;
          width: 3.1rem;
          height: 3.08rem;
          // opacity: 0.6;
          margin: 0.18rem 0.16rem 0.1rem 0.16rem;
          background: rgba(255,255,255,0.6);
          .wordAlert{
            margin: 0 auto;
            width: 1.42rem;
            height: auto;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 0.28rem;
            text-align: center;
            font-size: 0.24rem;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 1;
            margin-top: 1.46rem;
            padding: 0.14rem 0;
          }
        }
      .goodDetail {
        width: 100%;
        padding: 0 0.12rem;
        .title {
          margin-top: 0.18rem;
          width: 100%;
          height: 0.26rem;
          font-size: 0.26rem;
          font-weight: 400;
          color: #000000;
          line-height: 0.28rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .shareAndget {
          display: flex;
          justify-content: space-between;
          padding-top: 0.12rem;
          .get {
            min-width: 1.58rem;
            width: auto;
            height: 0.4rem;
            background: #ff4e51;
            border-radius: 0.04rem;
            display: flex;
            justify-content: start;
            align-items: center;
            overflow: hidden;
            .word {
              // padding-left: 0.02rem;
              line-height: 1;
              padding-top: 0.045rem;
              width: 0.72rem;
              font-size: 0.22rem;
              display: inline-block;
              transform: scale(0.9);
              -ms-transform:scale(0.9); 	/* IE 9 */
              -moz-transform:scale(0.9); 	/* Firefox */
              -webkit-transform:scale(0.9); /* Safari 和 Chrome */
              -o-transform:scale(0.9); 	/* Opera */
              transform-origin: 0 0;
              // padding: 0.06rem;
              margin-left: 0.04rem;
              color: #fff;
            }
            .priceget {
              margin-right: 0.02rem;
              min-width: 0.82rem;
              width: auto;
              height: auto;
              line-height: 1;
              background: #ffffff;
              border-radius: 0.04rem;
              padding-left: 0.04rem;
              padding-right: 0.04rem;
              padding-top: 0.04rem;
              padding-bottom: 0.04rem;
              font-size: 0.28rem;
              color: #ef3a58;
              -webkit-box-sizing: border-box;
              box-sizing: border-box;
              font-weight: 500;
              span {
                height: auto;
                line-height: 1;
                font-size: 0.24rem;
                display: inline-block;
                -webkit-transform: scale(0.916);
                transform: scale(0.916);
                -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
              }
            }
          }
          .share {
            width: 1.09rem;
            height: 0.44rem;
            background: #ff4e51;
            box-shadow: 0px 0px 0px 0px #ce0000;
            border-radius: 0.04rem;
            font-size: 0.24rem;
            display: inline-block;
            transform: scale(0.916);
            transform-origin: 0 0;
            text-align: center;
            color: #ffffff;
            line-height: 1;
            box-sizing: border-box;
            padding-top: 0.1rem;
          }
        }
        .price {
          width: 100%;
          display: flex;
          justify-content: start;
          align-items: baseline;
          font-size: 0.24rem;
          color: #ef3a58;
          .nowPrice {
            font-size: 0.36rem;
            color: #ef3a58;
            font-weight: 500;
            padding: 0 0.08rem 0 0.02rem;
          }
          .oldPrice {
            font-size: 0.24rem;
            font-weight: 400;
            color: #a5a1a1;
            text-decoration: line-through;
          }
        }
      }
    }
  }
  .allBg{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 100;
  }
  .shareTitle{
    position: fixed;
    bottom: 2.25rem;
    left: 0;
    width: 100%;
    line-height: 1;
    padding: 0.3rem 0;
    text-align: center;
    font-size: 0.3rem;
    font-weight: 500;
    color: #000000;
    border-bottom: 0.02rem solid rgba(0, 0, 0, 0.1);
    border-radius: 0.4rem 0.4rem 0px 0px;
    background: #fff;
  }
  .shareButton{
    position: fixed;
    display: flex;
    color: #000;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    padding-bottom: 0.28rem;
    bottom: 0;
    width: 100%;
    background: #fff;
    left: 0;
    z-index: 100;
    height: 2.26rem;
    padding-top: 0.48rem;
    // align-items: center;
    p{
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size:0.24rem;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        // color:rgba(255,255,255,0.41);
        line-height:0.34rem;
        img{
            width:0.84rem;
            height:0.84rem;
            border-radius: 50%;
            margin-bottom: 0.14rem;
        }
    }
}
}
</style>
